import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Colors } from 'react-native-ui-lib';
import Icon from 'react-native-vector-icons/Ionicons';
import { useRouter, useLocalSearchParams } from 'expo-router';
import { AppStyles, TextStyles, AppColors } from '../theme/uiLib.config';
import { StyleSheet, ScrollView, ImageBackground } from 'react-native';
import GetMorePointsModal from '../components/GetMorePointsModal';
import RecommendedMerchantsModal from '../components/RecommendedMerchantsModal';

const MyFamilyPoints = () => {
  const router = useRouter();
  const { memberId } = useLocalSearchParams();
  const [selectedMemberId, setSelectedMemberId] = useState(memberId ? String(memberId) : '1'); // 默认选中第一个成员
  const [getMorePointsModalVisible, setGetMorePointsModalVisible] = useState(false);
  const [recommendedMerchantsModalVisible, setRecommendedMerchantsModalVisible] = useState(false);

  // 模拟数据
  const familyMembers = [
    {
      id: '1',
      phone: '138****8000',
      points: 10762,
      taskPoints: 8276,
      merchants: [
        { name: '中国移动', ratio: '1:100', currentPoints: 2000 },
        { name: '天猫', ratio: '1:120', currentPoints: 1500 },
        { name: '京东商城', ratio: '1:150', currentPoints: 1200 },
        { name: '中国平安', ratio: '1:80', currentPoints: 800 },
        { name: '星巴克', ratio: '1:110', currentPoints: 762 },
        { name: '麦当劳', ratio: '1:90', currentPoints: 500 },
        { name: '肯德基', ratio: '1:130', currentPoints: 400 },
        { name: '必胜客', ratio: '1:180', currentPoints: 300 },
        { name: '瑞幸咖啡', ratio: '1:200', currentPoints: 200 },
        { name: '喜茶', ratio: '1:250', currentPoints: 100 },
      ],
    },
    {
      id: '2',
      phone: '139****9000',
      points: 2557,
      taskPoints: 2888,
      merchants: [
        { name: '星巴克', ratio: '1:110', currentPoints: 500 },
        { name: '麦当劳', ratio: '1:90', currentPoints: 200 },
        { name: '肯德基', ratio: '1:130', currentPoints: 1000 },
        { name: '必胜客', ratio: '1:180', currentPoints: 900 },
        { name: '瑞幸咖啡', ratio: '1:200', currentPoints: 1000 },
        { name: '喜茶', ratio: '1:250', currentPoints: 957 },
      ],
    },
    {
      id: '3',
      phone: '137****7000',
      points: 213,
      taskPoints: 6813,
      merchants: [{ name: '商户F', ratio: '1:35', currentPoints: 213 }],
    },
  ];

  const currentMember = familyMembers.find(member => member.id === selectedMemberId);

  const handleMemberSelect = (id: string) => {
    setSelectedMemberId(id);
  };

  return (
    <ImageBackground
      source={require('../../assets/images/bg/2.png')}
      style={styles.backgroundImage}
      resizeMode="stretch"
    >
      <View style={[AppStyles.pagePadding, { flex: 1, backgroundColor: 'transparent' }]}>
        {/* Header */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
            <Icon name="chevron-back" size={24} color={Colors.white} />
          </TouchableOpacity>
          <Text style={[TextStyles.h3, { color: Colors.white }]}>我家积分</Text>
        </View>

        <ScrollView style={{ marginTop: 20 }}>
          {/* 手机号切换按钮 */}
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}

          >
            <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
              {familyMembers.map((member) => (
                <TouchableOpacity
                  key={member.id}
                  style={{
                    marginRight: 10,
                    paddingVertical: 10,
                    paddingHorizontal: 16,
                    backgroundColor: selectedMemberId === member.id ? AppColors.white : Colors.blueplus,
                    borderRadius: 20,
                    borderWidth: 1,
                    borderColor: selectedMemberId === member.id ? AppColors.white : AppColors.blueplus,
                  }}
                  onPress={() => handleMemberSelect(member.id)}
                >
                  <Text style={[TextStyles.small, { color: selectedMemberId === member.id ? Colors.blueplus : AppColors.white, fontWeight: selectedMemberId === member.id ? 'bold' : 'normal' }]}>{member.phone}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </ScrollView>

          <View style={{
            flex: 1,
            backgroundColor: 'white',
            borderRadius: 8,
            elevation: 4,
            marginTop: 10,
          }}>
            {/* 可用积分 */}
            <View style={[AppStyles.cardStyle, { alignItems: 'center', padding: 12, marginBottom: 10 }]}>
            <TouchableOpacity style={{ position: 'absolute', right: 12, top: 12 }}>
                  <Text style={[TextStyles.small, { color: AppColors.primary }]}>使用明细</Text>
                </TouchableOpacity>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                <Text style={[TextStyles.h2, { color: AppColors.tertiary }]}>可用积分</Text>
              </View>
              <Text style={[TextStyles.number, { marginTop: 10, fontSize: 36, color: AppColors.golden }]}>{currentMember?.points || 0}</Text>
            </View>
          </View>
          <TouchableOpacity 
            style={{ padding: 12,borderRadius: 8,flexDirection: 'column', backgroundColor: AppColors.success, alignItems: 'flex-start', marginTop: 10 }}
            onPress={() => {
              router.push('/BindAccount');
            }}
          >
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="add-circle" size={18} color={AppColors.white} style={{ marginRight: 8 }} />
              <Text style={[TextStyles.smallBold, { color: AppColors.white }]}>新发现</Text>
              <Text style={[TextStyles.number, { color: AppColors.blueplus }]}> 10 </Text>
              <Text style={[TextStyles.smallBold, { color: AppColors.white }]}>家商户可绑定, 立即绑定！</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity 
            style={{ padding: 12,borderRadius: 8,flexDirection: 'column', backgroundColor: AppColors.success, alignItems: 'flex-start', marginTop: 10 }}
            onPress={() => {
              setRecommendedMerchantsModalVisible(true);
            }}
          >
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="heart-circle" size={18} color={AppColors.white} style={{ marginRight: 8 }} />
              <Text style={[TextStyles.smallBold, { color: AppColors.white }]}>发现</Text>
              <Text style={[TextStyles.number, { color: AppColors.blueplus }]}> 28 </Text>
              <Text style={[TextStyles.smallBold, { color: AppColors.white }]}>家值得加入的商户，立即查看!</Text>
            </View>
          </TouchableOpacity>

         

          {/* 已绑定商户列表 */}
          <View style={[
            AppStyles.cardStyle,
            {
              padding: 12,
              marginTop: 10,
              backgroundColor: 'white',
              borderRadius: 8,
              elevation: 4,
            }
          ]}>
            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-end', marginBottom: 20 }}>
              <Text style={[TextStyles.h3, { color: AppColors.tertiary }]}>已绑定商户</Text>
              <Text style={[TextStyles.small, { color: AppColors.secondary, marginLeft: 4 }]}>共{currentMember?.merchants.length || 0}家</Text>
            </View>

            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
              <Text style={[TextStyles.smallBold, { color: AppColors.tertiary, textAlign: 'left', flex: 3 }]}>商户名称</Text>
              <Text style={[TextStyles.smallBold, { color: AppColors.tertiary, textAlign: 'left', flex: 2 }]}>兑换比例</Text>
              <Text style={[TextStyles.smallBold, { color: AppColors.tertiary, textAlign: 'left', flex: 2 }]}>当前积分</Text>
              <Text style={[TextStyles.smallBold, { color: AppColors.tertiary, textAlign: 'left', flex: 1 }]}>操作</Text>
            </View>
            {currentMember?.merchants.map((merchant, index) => (
              <View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 16 }}>
                <Text style={[TextStyles.small, { color: AppColors.secondary, textAlign: 'left', flex: 3 }]}>{merchant.name}</Text>
                <Text style={[TextStyles.small, { color: AppColors.secondary, textAlign: 'left', flex: 2 }]}>{merchant.ratio}</Text>
                <Text style={[TextStyles.small, { color: AppColors.secondary, textAlign: 'left', flex: 2 }]}>{merchant.currentPoints}</Text>
                <Text style={[TextStyles.small, { color: AppColors.secondary, textAlign: 'left', flex: 1 }]}>解绑</Text>
              </View>
            ))}
            {currentMember?.merchants.length === 0 && (
              <Text style={[TextStyles.small, { color: AppColors.secondary }]}>暂无绑定商户</Text>
            )}
          </View>


         


          <TouchableOpacity 
            style={{ padding: 12,borderRadius: 8,flexDirection: 'column', backgroundColor: AppColors.blueplus, alignItems: 'flex-start', marginTop: 10 }}
            onPress={() => {
              setGetMorePointsModalVisible(true);
            }}
          >
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="checkmark-circle" size={18} color={AppColors.white} style={{ marginRight: 8 }} />
              <Text style={[TextStyles.smallBold, { color: AppColors.white }]}>做任务，可获得</Text>
              <Text style={[TextStyles.number, { color: AppColors.golden }]}> {currentMember?.taskPoints || 0} </Text>
              <Text style={[TextStyles.smallBold, { color: AppColors.white }]}>分, 立即去完成！</Text>
            </View>
          </TouchableOpacity>


        </ScrollView>
      </View>
      <GetMorePointsModal
        isVisible={getMorePointsModalVisible}
        onClose={() => setGetMorePointsModalVisible(false)}
      />
      <RecommendedMerchantsModal
        isVisible={recommendedMerchantsModalVisible}
        onClose={() => setRecommendedMerchantsModalVisible(false)}
      />
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 40,
    justifyContent: 'center',
  },
  backButton: {
    position: 'absolute',
    left: 0,
  },
});

export default MyFamilyPoints;
